let echarts = require('echarts/lib/echarts')
let elementResizeDetectorMaker = require("element-resize-detector")

export default {
    pieEchart: function (data) {
        let option = {
            title: {
                show: false,
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: '5%',
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    left: '10%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
        var chartDom = document.getElementById('chart-pie')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker()
        erd.listenTo(document.getElementById('chart-pie'), function (element) {
            myChart.resize()
        })
        return myChart
    },
    columnarEchart: function (data) {
        let value = data.valueData.map(item => {
            item.type = 'bar'
            item.data = item.val
            item.markPoint = {
                data: [
                    { type: 'max', name: 'Max' },
                    { type: 'min', name: 'Min' }
                ]
            }
            item.markLine = {
                data: [{ type: 'average', name: 'Avg' }]
            }
            return item
        })
        let option = {
            title: {
                show: false,
                text: 'Rainfall vs Evaporation',
                subtext: 'Fake Data'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            grid: {
                left: '3%',
                right: '8%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: false,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: data.XData,
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: value,
        }
        var chartDom = document.getElementById('chart-one')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker()
        erd.listenTo(document.getElementById('chart-one'), function (element) {
            myChart.resize()
        })
        return myChart
    },
    lineEchart: function (data) {
      console.log(data,'///***')
        let value = data.valueData.map(item => {
            item.type = 'line'
            // item.data = item.value
            item.data = item.val
            return item
        })
        let option = {
            title: {
                show: false,
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.XData
            },
            yAxis: {
                type: 'value'
            },
            series: value
        }
        var chartDom = document.getElementById('line-one')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker()
        erd.listenTo(document.getElementById('line-one'), function (element) {
            myChart.resize()
        })
        return myChart
    }
}
